<template>
  <div>
    <el-button
      type="info"
      icon="el-icon-delete"
      @click="toggleSelection()"
      round
      >取消选择</el-button
    >
    <el-popover
      popper-class="popoverBGC"
      placement="bottom"
      width="150"
      trigger="hover"
      content="添加频道"
      :close-delay="3"
    >
      <el-button
        type="primary"
        icon="el-icon-plus"
        @click="adddialogFormVisible = true"
        circle
        slot="reference"
      ></el-button>
    </el-popover>

    <el-popover
      popper-class="popoverBGC"
      placement="bottom"
      width="150"
      trigger="hover"
      content="删除频道"
      :close-delay="3"
    >
      <el-button
        type="danger"
        icon="el-icon-delete"
        @click="deleteChannel"
        circle
        slot="reference"
      ></el-button>
    </el-popover>
    <el-popover
      popper-class="popoverBGC"
      placement="bottom"
      width="150"
      trigger="hover"
      content="频道编辑"
      :close-delay="3"
    >
      <el-button
        type="warning"
        icon="el-icon-edit"
        @click="beforeCheck"
        circle
        slot="reference"
      ></el-button>
    </el-popover>
    <el-popover
      popper-class="popoverBGC"
      placement="bottom"
      width="150"
      trigger="hover"
      content="发布消息"
      :close-delay="3"
    >
      <el-button
        type="info"
        icon="el-icon-message"
        @click="beforeSendMessage"
        circle
        slot="reference"
      ></el-button>
    </el-popover>
    <el-popover
      popper-class="popoverBGC"
      placement="bottom"
      width="150"
      trigger="hover"
      content="查看发布消息"
      :close-delay="3"
    >
      <el-button
        icon="el-icon-search"
        @click="lookForMessage"
        circle
        slot="reference"
      ></el-button>
    </el-popover>
    <!-- 添加频道的dialog -->
    <el-dialog title="频道发布" :visible.sync="adddialogFormVisible">
      <el-form :model="form">
        <el-form-item label="频道名称" :label-width="formLabelWidth">
          <el-input v-model="form.channel" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="考试名称" :label-width="formLabelWidth">
          <el-select v-model="form.examTypeId" placeholder="请选择">
            <el-option
              v-for="item in examTypeList"
              :key="item.examTypeId"
              :label="item.examTypeDescription"
              :value="item.examTypeId"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="adddialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addChannel">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 更改频道的dialog -->
    <el-dialog title="更新频道信息" :visible.sync="updatedialogFormVisible">
      <el-form :model="u_form">
        <el-form-item label="频道名称" :label-width="formLabelWidth">
          <el-input v-model="u_form.u_channel" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="考试id" :label-width="formLabelWidth">
          <el-select v-model="u_form.u_examTypeId" placeholder="请选择">
            <el-option
              v-for="item in examTypeList"
              :key="item.examTypeId"
              :label="item.examTypeDescription"
              :value="item.examTypeId"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updatedialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateChannle">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 发布频道消息的dialog -->
    <el-dialog title="发布频道消息" :visible.sync="messagedialogFormVisible">
      <el-form :model="message_form">
        <el-form-item label="推送人" :label-width="formLabelWidth">
          <el-input
            v-model="message_form.publisher"
            autocomplete="off"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="频道" :label-width="formLabelWidth">
          <el-input
            v-model="message_form.channel"
            autocomplete="off"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="考试类型" :label-width="formLabelWidth">
          <el-input
            v-model="message_form.examType"
            autocomplete="off"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="考试具体描述" :label-width="formLabelWidth">
          <el-input
            v-model="message_form.examDescription"
            autocomplete="off"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="消息内容" :label-width="formLabelWidth">
          <el-input
            type="textarea"
            v-model="message_form.content"
            @keyup.enter.native="saveMessage"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="messagedialogFormVisible = false">取 消</el-button>
        <el-button type="success" @click="saveMessage">保 存</el-button>
        <el-button type="primary" @click="sendMessage">发布</el-button>
      </div>
    </el-dialog>

    <!-- 查看消息的drawer -->
    <el-drawer
      :visible.sync="messageDrawer"
      direction="rtl"
      size="40%"
      v-loading="loading"
    >
      <el-table :data="selectMessage" height="600">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form
              label-position="left"
              inline
              class="demo-table-expand"
              label-width="30%"
            >
              <el-form-item label="推送人">
                <span>{{ props.row.publisher }}</span> </el-form-item
              ><br />
              <el-form-item label="推送频道">
                <span>{{ props.row.channel }}</span> </el-form-item
              ><br />
              <el-form-item label="考试类型">
                <span>{{ props.row.examType }}</span> </el-form-item
              ><br />
              <el-form-item label="考试具体描述">
                <span>{{ props.row.examDescription }}</span> </el-form-item
              ><br />
              <el-form-item label="推送消息">
                <span>{{ props.row.content }}</span>
              </el-form-item>
              <br />
              <el-form-item label="状态">
                <span v-if="props.row.ifPublish">已发布</span>
                <span v-else>草稿件</span>
              </el-form-item>
              <br />
              <el-form-item>
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  @click="deleteMessage(props)"
                  >删除</el-button
                >
                <el-button
                  type="primary"
                  icon="el-icon-share"
                  v-if="!props.row.ifPublish"
                  @click="saveToSend(props)"
                  >发布</el-button
                >
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column prop="publisher" label="推送人"></el-table-column>
        <el-table-column prop="channel" label="所属频道"></el-table-column>
      </el-table>
    </el-drawer>

    <el-table
      v-loading="loading"
      ref="multipleTable"
      :data="
        channelList.slice((currentPage - 1) * pagesize, currentPage * pagesize)
      "
      style="width: 100%"
      @selection-change="handleSelectionChange"
      tooltip-effect="dark"
    >
      <el-table-column type="selection" width="50" align="center" />
      <el-table-column type="index" label="序号" align="center">
      </el-table-column>
      <el-table-column prop="channel" label="频道名称" align="center">
      </el-table-column>
      <el-table-column prop="number" label="频道消息数量" align="center">
      </el-table-column>
    </el-table>
    <el-pagination
      align="center"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="pagesize"
      background
      layout="total, prev, pager, next, jumper"
      :total="pageTotal"
    >
    </el-pagination>
  </div>
</template>

<script>
import axios from "axios";
import { mapState, mapActions } from "vuex";
export default {
  inject: ["reload"],
  name: "managerChannel",
  data() {
    return {
      //频道列表
      channelList: [],
      //考试列表
      examTypeList: [],
      //频道消息列表
      channelMessageList: [],
      //选中的消息列表
      selectMessage: [],
      examtype: "",
      loading: false,
      form: {
        channel: "",
        examTypeId: "",
      },
      //更新表
      u_form: {
        //需要id更新
        u_channelId: "",
        u_channel: "",
        u_examTypeId: "",
      },
      //初始页
      currentPage: 1,
      //每页的数据
      pagesize: 10,
      //数组总数
      pageTotal: 0,
      //选中的数据
      multipleSelection: [],

      //添加 dialog
      adddialogFormVisible: false,
      //更新 dialog
      updatedialogFormVisible: false,
      //发布频道消息 dialog
      messagedialogFormVisible: false,
      //频道消息查看的drawer
      messageDrawer: false,

      //发布频道消息form
      message_form: {
        //推送人
        publisher: "",
        //推送消息
        content: "",
        //推送频道
        channel: "",
        //考试类型
        examType: "",
        //考试具体描述
        examDescription: "",
        //是否发布 0保存 1发布， 默认保存
        ifPublish: 0,
      },

      formLabelWidth: "120px",
    };
  },
  computed: {
    ...mapState({
      print: (state) => state.print.all,
    }),
  },
  mounted: function () {
    this.getChannel();
  },
  methods: {
    getChannel: function () {
      this.loading = true;
      var that = this;
      axios
        .all([
          //获取频道
          axios({
            headers: {
              Authorization: this.print.Authorization,
            },
            method: "get",
            //限制页大小，待改善
            //参数 channel：测试频道 channeld：频道id examTypeId 考试类型id
            url: "/api/channel?pageNum=0&pageSize=100000",
          }),
          //添加前获取全部examid给表单选择器
          axios({
            headers: {
              Authorization: this.print.Authorization,
            },
            method: "get",
            //限制页大小，待改善
            //参数 examTypeName:考试类型 examTypeDescription:考试类型描述 examLimit:考试限制
            url: "/api/exam",
            params: {
              pageNum: 0,
              pageSize: 100000,
            },
          }),
          //获取全部消息
          axios({
            headers: { Authorization: this.print.Authorization },
            method: "get",
            url: "/api/message?pageNum=0&pageSize=100000",
          }),
        ])
        .then(
          axios.spread(function (
            channelResponse,
            examResponse,
            messageResponse
          ) {
            //获取频道后处理
            that.pageTotal = channelResponse.data.data.length;
            that.channelList = channelResponse.data.data;
            //获取考试类型 后处理
            that.examTypeList = examResponse.data.data;
            //获取每个频道消息数量
            that.channelMessageList = messageResponse.data.data;
            //获取每个频道消息数量
            that.channelList.forEach((item) => {
              that.$set(
                item,
                "number",
                that.channelMessageList.filter(
                  (message) => message.channel == item.channel
                ).length
              );
            });

            that.loading = false;
          })
        )
        .catch((err) => {
          that.$message.error("获取失败");
          that.loading = false;
        });
    },

    getAllMessage: function () {
      var that = this;
      axios({
        headers: { Authorization: this.print.Authorization },
        method: "get",
        url: "/api/message?pageNum=0&pageSize=100000",
      }).then(
        function (response) {
          that.channelMessageList = response.data.data;
          //response.data.data.examType 实际上是id
          for (var i = 0; i < that.channelMessageList.length; i++) {
            that.examtype = that.examTypeList.find(
              (examtype) =>
                examtype.examTypeId == response.data.data[i].examType
            );
            that.channelMessageList[i].examType = that.examtype.examTypeName;
          }
        },
        function (err) {
          that.$message.error("获取失败，请重新尝试");
        }
      );
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    //取消选择
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },

    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
    },

    addChannel: function () {
      var that = this;
      axios({
        headers: {
          Authorization: this.print.Authorization,
          "Content-Type": "application/x-www-form-urlencoded",
        },
        method: "post",
        url: "/api/channel",
        params: {
          channel: this.form.channel,
          examTypeId: this.form.examTypeId,
        },
      }).then(
        function (response) {
          that.$message({
            message: "发布成功",
            type: "success",
          });
          that.reload();
        },
        function (err) {
          that.$message.error("发布失败，请重新尝试");
        }
      );
    },

    deleteChannel: function () {
      var that = this;
      if (this.multipleSelection.length == 0) {
        this.$message({
          message: "未选中删除项",
          type: "warning",
        });
      } else {
        for (var i = 0; i < this.multipleSelection.length; i++) {
          //console.log(this.multipleSelection[i]);
          axios({
            headers: { Authorization: this.print.Authorization },
            method: "delete",
            url: "/api/channel",
            params: {
              channelId: this.multipleSelection[i].channelId,
            },
          }).then(
            function (response) {
              that.$message({
                message: "删除成功",
                type: "success",
              });
              that.reload();
            },
            function (err) {
              that.$message.error("删除失败，请重新尝试");
            }
          );
        }
      }
    },

    beforeCheck: function () {
      if (this.multipleSelection.length > 1) {
        this.$message({
          message: "只能选中一个进行修改",
          type: "warning",
        });
      } else if (this.multipleSelection.length == 0) {
        this.$message({
          message: "请选中一个进行修改",
          type: "warning",
        });
      } else {
        this.updatedialogFormVisible = true;
        this.u_form.u_channelId = this.multipleSelection[0].channelId;
        this.u_form.u_channel = this.multipleSelection[0].channel;
        this.u_form.u_examTypeId = this.multipleSelection[0].examTypeId;
      }
    },

    updateChannle: function () {
      var that = this;
      axios({
        headers: { Authorization: this.print.Authorization },
        method: "put",
        url: "/api/channel",
        data: {
          channelId: this.u_form.u_channelId,
          channel: this.u_form.u_channel,
          examTypeId: this.u_form.u_examTypeId,
        },
        transformRequest: [
          function (data) {
            let ret = "";
            for (let it in data) {
              ret +=
                encodeURIComponent(it) +
                "=" +
                encodeURIComponent(data[it]) +
                "&";
            }
            return ret;
          },
        ],
      }).then(
        function (response) {
          that.$message({
            message: "更改成功",
            type: "success",
          });
          that.reload();
        },
        function (err) {
          that.$message.error("更新失败，请重新尝试");
        }
      );
    },

    beforeSendMessage: function () {
      if (this.multipleSelection.length > 1) {
        this.$message({
          message: "只能选中一个频道发布消息",
          type: "warning",
        });
      } else if (this.multipleSelection.length == 0) {
        this.$message({
          message: "请选中一个进行频道发布消息",
          type: "warning",
        });
      } else {
        this.messagedialogFormVisible = true;
        this.message_form.publisher = this.print.username;
        this.message_form.channel = this.multipleSelection[0].channel;
        this.examtype = this.examTypeList.find(
          (examtype) =>
            examtype.examTypeId == this.multipleSelection[0].examTypeId
        );
        this.message_form.examType = this.examtype.examTypeName;
        this.message_form.examDescription = this.examtype.examTypeDescription;
      }
    },

    saveMessage: function () {
      var that = this;
      axios({
        headers: { Authorization: this.print.Authorization },
        method: "post",
        url: "/api/message",
        data: this.message_form,
        transformRequest: [
          function (data) {
            let ret = "";
            for (let it in data) {
              ret +=
                encodeURIComponent(it) +
                "=" +
                encodeURIComponent(data[it]) +
                "&";
            }
            return ret;
          },
        ],
      }).then(
        function (response) {
          that.$message({
            message: "保存草稿成功",
            type: "success",
          });
          (that.message_form.content = ""),
            (that.messagedialogFormVisible = false);
        },
        function (err) {
          that.$message.error("保存草稿失败，请重新尝试");
          that.messagedialogFormVisible = false;
        }
      );
    },

    sendMessage: function () {
      var that = this;
      this.message_form.ifPublish = 1;
      axios({
        headers: {
          Authorization: this.print.Authorization,
        },
        method: "post",
        url: "/api/message",
        data: this.message_form,
        transformRequest: [
          function (data) {
            let ret = "";
            for (let it in data) {
              ret +=
                encodeURIComponent(it) +
                "=" +
                encodeURIComponent(data[it]) +
                "&";
            }
            return ret;
          },
        ],
      }).then(
        function (response) {
          that.$message({
            message: "发布成功",
            type: "success",
          });
          (that.message_form.content = ""), (that.message_form.ifPublish = 0);
          that.messagedialogFormVisible = false;
        },
        function (err) {
          that.$message.error("发布失败，请重新尝试");
          that.message_form.ifPublish = 0;
          that.messagedialogFormVisible = false;
        }
      );
    },

    lookForMessage: function () {
      this.messageDrawer = true;
      this.loading = true;
      this.selectMessage = [];
      if (this.multipleSelection.length == 0) {
        this.selectMessage = this.channelMessageList;
        this.loading = false;
      } else {
        this.multipleSelection.forEach((item) => {
          //不一定只是一个，不能filter
          this.channelMessageList.forEach((channel) => {
            if (channel.channel == item.channel)
              this.selectMessage.push(channel);
          });
        });
        this.loading = false;
      }
    },

    deleteMessage: function (row) {
      var that = this;
      var publish = 0;
      if (typeof row.row.ifPublish == "boolean")
        if (row.row.ifPublish == true) publish = 1;
        else publish = 0;
      axios({
        headers: {
          Authorization: this.print.Authorization,
          "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
        },
        method: "delete",
        url: "/api/message",
        params: {
          messageId: row.row.messageId,
          publisher: row.row.publisher,
          content: row.row.content,
          channel: row.row.channel,
          examType: row.row.examType,
          examDescription: row.row.examDescription,
          ifPublish: publish,
        },
      }).then(function (response) {
        if (response.data.success != false) {
          that.$message({
            message: "删除成功",
            type: "success",
          });
          that.selectMessage.splice(row.$index, 1);
        } else {
          that.$message.error("删除失败，请重新尝试");
        }
      });
    },

    saveToSend: function (row) {
      var that = this;
      axios({
        headers: {
          Authorization: this.print.Authorization,
          "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
        },
        method: "put",
        url: "/api/message",
        params: {
          messageId: row.row.messageId,
          publisher: row.row.publisher,
          content: row.row.content,
          channel: row.row.channel,
          examType: row.row.examType,
          examDescription: row.row.examDescription,
          ifPublish: 1,
        },
      }).then(function (response) {
        if (response.data.success != false) {
          row.row.ifPublish = true;
          that.$message({
            message: "发布成功",
            type: "success",
          });
        } else {
          that.$message.error("发布失败，请重新尝试");
        }
      });
    },
  },
};
</script>

<style>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 120px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 100%;
}
.popoverBGC {
  opacity: 0.7;
  text-align: center;
}
</style>